<template>
  <el-row>
    <el-col :span="24">
      <div class="box">
        <div class="box-body">
          <!-- <el-row>
            <a @click="refresh()">刷新</a>
          </el-row> -->
          <el-row>
            <el-col :span="6">
              <i
                class="el-icon-arrow-left"
                style="color: #909399;padding-top: 5px; "
                @click="goback()"
              >
                返回培训信息列表</i
              >
            </el-col>
            <el-col :span="18">
              <h3
                class="box-title"
                style="line-height: 40px; float: left;text-align:center;"
              >
                当前查看的是参与<i style="color: red;">{{
                  train.start_time
                }}</i>
                至
                <i style="color: red;">{{ train.end_time }}</i>
                第<i style="color: red;">{{ train.issue }}</i
                >期的培训信息
              </h3>
            </el-col>
          </el-row>
          <div v-if="seeSearch">
            <el-row>
              <el-col :span="18">
                <ul>
                  <li
                    v-for="item in schoolPre"
                    class="selector"
                    @click="selectPre(item.value)"
                    v-bind:class="{ selected: item.selected }"
                  >
                    {{ item.label }}
                  </li>
                </ul>
              </el-col>
              <el-col>
                <ul
                  style="max-height: 145px; overflow:auto;margin: 0px 0 0 40px;-webkit-padding-start: 0px;"
                >
                  <li
                    v-for="item in schools"
                    class="selector sl-school"
                    @click="selectSch(item.value)"
                    v-if="item.show"
                  >
                    {{ item.label }}
                    <i
                      v-if="item.selected"
                      class="el-icon-check slbackground"
                    ></i>
                  </li>
                </ul>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="box-body">
          <h3 class="box-title" style="line-height: 40px;float: left;">
            人员信息
          </h3>
          <el-table
            :data="tableData"
            v-loading="loading"
            stripe
            style="width: 100%"
          >
            <el-table-column prop="id" label="ID" width="80"></el-table-column>
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column
              prop="preoccupation"
              label="职务级别"
            ></el-table-column>
            <!-- <el-table-column prop="exedu"  label="培训经历"></el-table-column> -->
            <el-table-column prop="status" label="高校审核状态">
              <template scope="scope">
                <el-tag
                  type="warning"
                  v-if="scope.row.status == 1"
                  close-transition
                  >未审核</el-tag
                >
                <el-tag
                  type="success"
                  v-if="scope.row.status == 2"
                  close-transition
                  >审核通过</el-tag
                >
                <el-tag
                  type="danger"
                  v-if="scope.row.status == 3"
                  close-transition
                  >审核失败</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column prop="status1" label="教育厅审核状态">
              <template scope="scope">
                <!-- <el-tag type="warning" v-if="scope.row.status == 0" close-transition>正在审核</el-tag> -->
                <el-tag
                  type="warning"
                  v-if="scope.row.status1 == 1"
                  close-transition
                  >未审核</el-tag
                >
                <el-tag
                  type="success"
                  v-if="scope.row.status1 == 2"
                  close-transition
                  >审核通过</el-tag
                >
                <el-tag
                  type="danger"
                  v-if="scope.row.status1 == 3"
                  close-transition
                  >审核失败</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  v-popover:popover5
                  style="background: #367fa9;"
                  size="small"
                  type="primary"
                  icon="el-icon-video-play"
                  :disabled="train.status === 2"
                  @click.stop="checkEdu(scope.row)"
                  >审核</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- <el-pagination
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            layout="prev, pager, next"
            :page-count="total"
            style="float: right;"
          ></el-pagination> -->
        </div>
      </div>
    </el-col>
    <!-- 审核培训经历信息 -->
    <el-dialog
      title="历史培训经历"
      :visible.sync="checkInfo"
      width="50%"
      center>
      <el-table
        :data="extraintableData"
        style="width: 100%;"
        v-loading="loading1"
        max-height="500"
      >
        <el-table-column
          prop="traindata_name"
          label="培训名称"
        ></el-table-column>
        <el-table-column prop="company" label="组织单位"></el-table-column>
        <el-table-column
          prop="traindata_address"
          label="培训地点"
        ></el-table-column>
        <el-table-column prop="start_time" label="开始时间"></el-table-column>
        <el-table-column prop="end_time" label="结束时间"></el-table-column>
        <el-table-column
          prop="traindata_level"
          label="培训级别"
        ></el-table-column>
      </el-table>
      <div style="margin-top:20px; text-align: center;">
        <el-switch
          style="margin-right:50px;"
          v-model="curStatus"
          active-color="#13ce66"
          inactive-color="#ff4949"
          active-text="审核通过"
          inactive-text="审核失败"
        >
        </el-switch>
        <!-- <el-button @click="checkInfo = false" size="mini">取 消</el-button> -->
        <el-button type="primary" @click="check()" size="mini">确 定</el-button>
      </div>
    </el-dialog>
  </el-row>
</template>

<script>
import mtils from "../../../assets/js/Mtils.js";
import http from "./../../../assets/js/http";

export default {
  data() {
    return {
      train: {},
      loading: true,
      loading1: true,
      seeSearch: true,
      checkInfo: false,
      curStatus: true,
      extraintableData: [],
      pre: 0,
      schoolPre: [
        { label: "所有高校", value: 0, selected: true },
        { label: "A", value: 1, selected: false },
        { label: "B", value: 2, selected: false },
        { label: "C", value: 3, selected: false },
        { label: "D", value: 4, selected: false },
        { label: "E", value: 5, selected: false },
        { label: "F", value: 6, selected: false },
        { label: "G", value: 7, selected: false },
        { label: "H", value: 8, selected: false },
        { label: "I", value: 9, selected: false },
        { label: "J", value: 10, selected: false },
        { label: "K", value: 11, selected: false },
        { label: "L", value: 12, selected: false },
        { label: "M", value: 13, selected: false },
        { label: "N", value: 14, selected: false },
        { label: "O", value: 15, selected: false },
        { label: "P", value: 16, selected: false },
        { label: "Q", value: 17, selected: false },
        { label: "R", value: 18, selected: false },
        { label: "S", value: 19, selected: false },
        { label: "T", value: 20, selected: false },
        { label: "U", value: 21, selected: false },
        { label: "V", value: 22, selected: false },
        { label: "W", value: 23, selected: false },
        { label: "X", value: 24, selected: false },
        { label: "Y", value: 25, selected: false },
        { label: "Z", value: 26, selected: false }
      ],
      schoolsData: [],
      schools: [],
      tableData: [],
      // 二级页面传给后台的值
      schData: {
        traindata_id: "",
        sch_id: ""
      },
      // 三级页面审核时，传给后台的值
      checkStatus: {
        train_id: "",
        traindata_id: "",
        status: "",
        status1: ""
      }
      /* currentPage: 1,
      total: 1 */
    };
  },
  methods: {
    /* refresh() {
      // _g.shallowRefresh(this.$route.name)
      _g.refreshFullPath(this.$route.fullPath)
      // _g.refresh(this.$route.name, this.$route.params)
      // router.replace({ name: this.$route.name, params: this.$route.params})
    }, */
    // 点击培训信息下的页码，返回对应的数据
    /* handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      let data = {
        page: this.currentPage,
      }
      this.getList(item)
    }, */
    checkEdu(item) {
      this.checkInfo = true;
      // 将id数据传给dialog页面按钮，让后台改
      // this.check(item.id)
      this.checkStatus.train_id = item.id;
      this.checkStatus.status = item.status;
      this.checkStatus.status1 = item.status1;
      this.checkStatus.traindata_id = this.train.id;
      let data = {
        train_id: item.id
      };
      this.loading1 = true;
      // 传id,获取这个id的培训经历，渲染extraintableData
      this.apiPost("admin/Extrain/ExtrainList", data).then(res => {
        this.handelResponse(res, data => {
          this.extraintableData = res.data;
        });
        this.loading1 = false;
      });
    },
    check() {
      console.log();
      if (Lockr.get("userInfo").level === 2) {
        // 高校老师进来，
        if (this.curStatus) {
          console.log("是宣传老师审核通过");
          this.checkStatus.status = 2;
        } else {
          console.log("是宣传老师审核失败");
          this.checkStatus.status = 3;
        }
      } else {
        // 教育厅
        if (this.curStatus) {
          console.log("是教育厅老师审核通过");
          this.checkStatus.status1 = 2;
        } else {
          console.log("是教育厅老师审核失败");
          this.checkStatus.status1 = 3;
        }
      }
      console.log(this.checkStatus);
      this.apiPost("admin/Traindata/TraindataCheckedu", this.checkStatus).then(
        res => {
          this.handelResponse(res, data => {
            // console.log(res)
            _g.toastMsg("success", res.data);
          });
          this.checkInfo = false;
          this.getList();
        }
      );
    },
    goback() {
      router.push({ name: "info" });
    },
    getTrain() {
      let data = {
        params: {
          id: this.$route.params.id
        }
      }
      this.apiGet('admin/Traindata/detail', data).then(res => {
        this.handelResponse(res, data => {
          this.train = data
        })
      })
    },
    // 初始化渲染数据
    getList() {
      this.loading = true;
      this.schData.traindata_id = this.$route.params.id;
      if (Lockr.get("userInfo").level === 2) {
        // 高校
        this.schData.sch_id = Lockr.get("userInfo").sch;
      } // else 教育厅,在页面中选择学校的时候修改
      let data = this.schData;
      this.apiPost("admin/Traindata/TraindataSchool", data).then(res => {
        this.handelResponse(res, data => {
          // console.log(res.data)
          if (this.schData.sch_id == "") {
            // 没有传sch_id
            this.schoolsData = res.data.sch;
            this.init();
            this.tableData = res.data.list
          } else {
            this.tableData = res.data;
          }
        });
        this.loading = false;
      });
    },
    // 渲染search的学校
    init() {
      this.schoolsData.forEach(element => {
        this.schools.push({
          // label: element.sch_name,
          label: Lockr.get("schInfo")["sch_id_" + element]["sch_name"],
          value: element,
          selected: false,
          show: true,
          firstChar: Mtils.utils
            .makePy(
              Lockr.get("schInfo")["sch_id_" + element]["sch_name"],
              true
            )
            .substr(0, 1)
        });
      });
    },
    // 选字母
    selectPre(index) {
      console.log(index);
      if (index === this.pre) {
        this.pre = 0;
        console.log("返回所有的信息")
      } else {
        this.pre = index;
      }
      console.log(this.pre);
      this.schoolPre.forEach(element => {
        if (this.pre === element.value) {
          element.selected = true;
        } else {
          element.selected = false;
        }
      });
      this.refreshSchools();
    },
    // 选学校
    selectSch(index) {
      this.schools.forEach(element => {
        if (index === element.value) {
          element.selected = !element.selected;
          this.schData.sch_id = index; // 将教育厅选择的学校存起来
          // 如果学校被选中，则渲染tableData
          if (element.selected == true) {
            this.getList();
          } else {
            // 没有选中的学校，则将tableData置空
            this.tableData = [];
          }
        } else {
          element.selected = false;
        }
      });
    },
    refreshSchools() {
      // console.log(this.pre)
      this.schools.forEach(element => {
        element.show = true;
        if (this.pre === 0) {
          element.show = true;
        } else {
          if (this.schoolPre[this.pre]["label"] !== element.firstChar) {
            element.show = false;
          }
        }
      });
    }
  },
  created() {
    _g.closeGlobalLoading();
    this.getTrain()
    this.getList()
    if (Lockr.get("userInfo").level === 2) {
      this.seeSearch = false;
    }
  },
  computed: {},
  watch: {
    schools: {
      handler(newSchools, oldSchools) {
        // 没有显示数据的
        if (
          newSchools.every(element => {
            return !element.show;
          })
        ) {
          this.checkedSchool = false;
        } else {
          let bool = true;
          newSchools.forEach(element => {
            if (element.show && !element.selected) {
              bool = false;
            }
            return;
          });
          this.checkedSchool = bool;
        }
      },
      immediate: true,
      deep: true
    }
  },
  mixins: [http]
};
</script>
<style scoped>
.box {
  position: relative;
  border-radius: 3px;
  background: #fff;
  border-top: 3px solid #d2d6de;
  margin-bottom: 20px;
  width: 100%;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  border-top-color: #3c8dbc;
}
.box-body {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
  padding: 10px;
  min-height: 0.01%;
  overflow-x: auto;
}
.form-group {
  margin-bottom: 15px;
}
.selector {
  float: left;
  display: block;
  margin-bottom: 10px;
  padding: 0 8px;
  height: 20px;
  line-height: 22px;
  border: 1px solid #fff;
  cursor: default;
  text-align: center;
  color: #005aa0;
}
.selected {
  border-color: red;
}
.slbackground {
  position: absolute;
  right: 1px;
  bottom: 0px;
  color: #ecf5ff;
  background-color: red;
  border-radius: 3px;
}
.sl-school {
  position: relative;
  border: 2px solid #ddd;
  margin: -1px;
  width: 295px;
  height: 35px;
  text-align: center;
  line-height: 35px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.sl-dept {
  position: relative;
  border: 1px solid #ddd;
  margin: -1px -1px 0 0;
  width: 94px;
  height: 47px;
  text-align: center;
  line-height: 48px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.sl-left {
  display: block;
  position: relative;
  text-align: center;
  margin: -1px -1px 0 0;
  height: 47px;
  line-height: 48px;
  border: 1px solid #ddd;
}
.title {
  font-weight: 600;
  letter-spacing: 3px;
  font-size: 18px;
}
.selectedColor {
  background: #3c8dbc;
}
.frame1 {
  background: #005aa0;
  color: #fff;
  animation: myfirst1 1s;
  -moz-animation: myfirst1 1s; /* Firefox */
  -webkit-animation: myfirst1 1s; /* Safari and Chrome */
  -o-animation: myfirst1 1s; /* Opera */
}
.label {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
  font-weight: 700;
}

@keyframes myfirst1 {
  0% {
    background: rgb(47, 224, 255);
  }
  100% {
    background: #005aa0;
    width: 0px;
  }
}

@-moz-keyframes myfirst1 /* Firefox */ {
  0% {
    background: rgb(47, 224, 255);
  }
  100% {
    background: #005aa0;
    width: 0px;
  }
}

@-webkit-keyframes myfirst1 /* Safari and Chrome */ {
  0% {
    background: rgb(47, 224, 255);
  }
  100% {
    background: #005aa0;
    width: 0px;
  }
}

@-o-keyframes myfirst1 /* Opera */ {
  0% {
    background: rgb(47, 224, 255);
  }
  100% {
    background: #005aa0;
    width: 0px;
  }
}

.frame2 {
  background: rgb(47, 224, 255);
  color: #fff;
  width: 94px;
  animation: myfirst2 1s;
  -moz-animation: myfirst2 1s; /* Firefox */
  -webkit-animation: myfirst2 1s; /* Safari and Chrome */
  -o-animation: myfirst2 1s; /* Opera */
}
@keyframes myfirst2 {
  100% {
    background: rgb(47, 224, 255);
  }
  0% {
    background: #005aa0;
    width: 0px;
  }
}

@-moz-keyframes myfirst2 /* Firefox */ {
  100% {
    background: rgb(47, 224, 255);
  }
  0% {
    background: #005aa0;
    width: 0px;
  }
}

@-webkit-keyframes myfirst2 /* Safari and Chrome */ {
  100% {
    background: rgb(47, 224, 255);
  }
  0% {
    background: #005aa0;
    width: 0px;
  }
}

@-o-keyframes myfirst2 /* Opera */ {
  100% {
    background: rgb(47, 224, 255);
  }
  0% {
    background: #005aa0;
    width: 0px;
  }
}

element.style {
  padding: 8px 0px;
}

.el-table::before {
  background-color: white;
}
.el-table td,
.el-table th {
  padding: 8px 0;
}
</style>
